<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>菜单管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 按钮 -->
    <el-button @click="addInfo" class="btnInfo" size="small" type="primary" plain
      >添加</el-button
    >
    <!-- 数据列表 -->
    <v-list @edit="edit"></v-list>
    <!-- 弹框组件 -->
    <v-dialog ref="diaRef" @cancel="cancel" :isShow="isShow" :isAdd="isAdd"></v-dialog>
  </div>
</template>

<script>
//引入列表组件
import vList from './list'
//引入弹框组件
import vDialog from './dialog'
export default {
  data() {
    return {
      isShow:false, //用于控制弹框的显示隐藏
      isAdd:true, //定义一个属性用于区分是添加还是编辑
    };
  },
  methods: {
    //封装一个添加按钮的事件
    addInfo(){
      //打开弹框
      this.isShow = true
      //告诉弹框你是个添加
      this.isAdd = true
    },
    //封装一个关闭弹框的事件
    cancel(e){
      this.isShow = e
    },
    //封装一个编辑打开弹框事件
    edit(e){
      //打开弹框
      this.isShow = true
      //告诉弹框 你是个编辑
      this.isAdd = false
      console.log(this.$refs.diaRef,'子组件')
      this.$refs.diaRef.lookup(e)
    }
  },
  components:{
    vList,
    vDialog
  }
};
</script>

<style lang="less" scoped>
.btnInfo {
  margin: 10px;
}
</style>